<template>
  <div>
    <div><h1>散户玉米</h1></div>

    <div class="form-container">
      <el-form :inline="true" v-model="date" :label-position="right" label-width="100px">
        <el-form-item label="车号:">
          <el-input class="jhtext" v-model="date.chehao" type="text" width="440px"/>
        </el-form-item>
        <el-form-item label="合同个人粮:">
          <el-select class="saptext" v-model="date.htgrx" @change="selecthtjg" placeholder="请选择">
            <el-option
              v-for="item in ymhthOptions"
              :key="item.id"
              :label="item.hth"
              :value="item.hth">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input class="jhlxtext" v-model="date.xm" type="text"/>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input class="jhrqtext" v-model="date.sfzh" type="text"/>
        </el-form-item>
        <el-form-item label="自产证明:">
          <el-select class="saptext" v-model="date.zczm" placeholder="请选择">
            <el-option
              v-for="item in zczmOptions"
              :key="item.id"
              :label="item.text"
              :value="item.text">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自产证明手机号:">
          <el-input class="gysmctext" v-model="date.zczmsjh" type="text"/>
        </el-form-item>
        <el-form-item label="物料\合同个人粮价格:">
          <el-input class="sjxmtext" v-model="date.htgrjg" placeholder="玉米" type="text"/>
        </el-form-item>
        <el-form-item label="银行卡号:">
          <el-input class="chtext" v-model="date.yhkh" type="text"/>
        </el-form-item>
        <el-form-item label="价格:干粮:">
          <el-input class="chtext" v-model="date.gl" type="text"/>
        </el-form-item>
        <el-form-item label="潮粮:">
          <el-input class="chtext" v-model="date.cl" type="text"/>
        </el-form-item>
        <el-form-item label="规格:">
          <el-input class="chtext" v-model="date.gg" type="text"/>
        </el-form-item>
        <el-form-item label="物流名:">
          <el-input class="chtext" v-model="date.wlm" type="text"/>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input class="chtext" v-model="date.bz" type="text"/>
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input class="chtext" v-model="date.sjh" type="text"/>
        </el-form-item>
        <el-form-item label="车厢长:">
          <el-input class="chtext" v-model="date.cxc" type="text"/>
        </el-form-item>
        <el-form-item label="超长车标记:">
          <el-checkbox
            v-model="date.yc_ccc"
            :true-label='1'
            :false-label='0'
          >
          </el-checkbox>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-button type="primary" @click="submitData">提交</el-button>

    </div>
  </div>
</template>

<script>

import {
  lisTb_chengys,
  lisTb_hetonghuayan,
  selectCgh, selectCgi, selectymjg, selectzczm,
  tbGuozhongExists,
  tbGuozhonginsert, tbGuozhonginsertsh
} from "@/api/system/Fdongbei/zd";

export default {
  data() {
    return {
      right: "",
      date: {
        chehao: '',
        htgrx: '',
        xm: '',
        sfzh: '',
        zczm: '',
        zczmsjh: '',
        htgrjg: '',
        yhkh: '',
        gl: '',
        cl: '',
        gg: '',
        wlm: '',
        bz: '',
        sjh: '',
        cxc: '',
        yc_ccc: '',
      },
      ymhthOptions: [],
      zczmOptions: [],
      guozhong: {
        wlmcc: '',
        jsdj: '',
        card_id: '',
        chehao: '',
        czbh: '',
        wlbh: '',
        gblx: '',
        gbzt: '',
        gysdm: '',
        fpscsfzh: '',
        czymc: '',
        guige: '',
        gsbh: '',
        zjshbs: '',
        jshth: '',
        ymqysj: '',
        zczm: '',
        wlmc: '',
        bz: '',
        fk_zdr: '',
        kk_rjbb: '',
        yc_ccc: '',
        fksj: '',
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      lisTb_hetonghuayan().then(response => {
        this.ymhthOptions = response.data

      })
      selectzczm().then(response => {
        this.zczmOptions = response.data

      }),
        selectymjg({WERKS: '1600', ZCONTRACT: this.date.htgrx}).then(response => {
          console.log(response.data.price)
          this.date.gl = response.data.price,
            this.date.cl = response.data.price1

        })
    },
    selecthtjg() {
      if (this.date.htgrx === '自然人') {
        return
      }
      selectymjg({WERKS: '1600', ZCONTRACT: this.date.htgrx}).then(response => {
        console.log(response.data.price)
        this.date.gl = response.data.price,
          this.date.cl = response.data.price1

      })
    },
    submitData() {//提交
      if (this.date.chehao === "") {
        this.qk()
        this.$modal.alertWarning("车号不能为空")
        return
      }
      if (this.date.sjh === "" && this.date.sjh.length !== 11) {
        this.qk()
        this.$modal.alertWarning("手机号不能为空或位数不对")
        return
      }
      tbGuozhongExists({chehao: this.date.chehao}).then(response => {
        if (response.msg === 'OK') {
          this.guozhong = {
            wlmcc: this.date.wlm,
            jsdj: this.date.gl,
            card_id: '',
            chehao: this.date.chehao,
            czbh: 'DR',
            wlbh: '000000000000311001',
            wlmc: '玉米',
            gblx: 'SH',
            gbzt: '待进厂',
            gysdm: this.date.xm,
            fpscsfzh: this.date.sfzh,
            czymc: this.$store.state.user.name,
            guige: this.date.gg,
            gsbh: '1600',
            zjshbs: '真',
            jshth: this.date.htgrx,
            ymqysj: '',
            zczm: this.date.zczm,
            bz: this.date.bz,
            fk_zdr: this.$store.state.user.name,
            kk_rjbb: '版本号',
            yc_ccc: this.date.yc_ccc,
            fksj: new Date().toISOString(),
          }
        //  console.log("开始访问后端")
          tbGuozhonginsertsh(this.guozhong).then(response => {
            if (response.msg != 0) {
              this.qk()
              this.$modal.alert("保存成功")
            } else {
              this.qk()
              this.$modal.alertWarning("保存失败")
            }
          })
        } else {
          this.qk()
          this.$modal.alertWarning(response.msg)
        }
      })
    },
    qk() {
      this.date = {
        chehao: '',
        htgrx: '',
        xm: '',
        sfzh: '',
        zczm: '',
        zczmsjh: '',
        htgrjg: '',
        yhkh: '',
        gl: '',
        cl: '',
        gg: '',
        wlm: '',
        bz: '',
        sjh: '',
        cxc: '',
        yc_ccc: '',
      },
        this.ymhthOptions = [],
        this.zczmOptions = [],
        this.guozhong = {
          wlmcc: '',
          jsdj: '',
          card_id: '',
          chehao: '',
          czbh: '',
          wlbh: '',
          gblx: '',
          gbzt: '',
          gysdm: '',
          fpscsfzh: '',
          czymc: '',
          guige: '',
          gsbh: '',
          zjshbs: '',
          jshth: '',
          ymqysj: '',
          zczm: '',
          wlmc: '',
          bz: '',
          fk_zdr: '',
          kk_rjbb: '',
          yc_ccc: '',
          fksj: '',
        }
    }
  }
};

</script>

<style scoped lang="scss">
.el-icon-searchsousuo {
  display: flex;
  align-items: center;
}

.el-input {
  width: auto;
  flex-grow: 3;
}

.el-button {
  margin-left: 10px; /* 调整按钮与输入框之间的间距 */
  flex-shrink: 0; /* 防止按钮在宽度不足时被压缩 */
}

.input-with-select {
  background-color: #fff;
}
</style>
